import { useMemo, useState } from 'react';
import Child from '../child';
import styles from './index.less';
import AppContext from '../context';
import { Button, Input } from 'antd';

// @umijs/preset-react低版本的默认使用的是V2
export default function IndexPage() {
  const [count, setCount] = useState(0);
  // useMemo的使用
  const [value, setValue] = useState('');

  // const getNum = () => {
  //   console.log('getNum');
  //   return count * 100;
  // };

  // 依赖于count这个变量，当count这个变量发生变化的时候才会调用下面这个方法
  const getNumMemo = useMemo(() => {
    console.log('getNum');
    return count * 100;
  }, [count]);

  return (
    <div>
      {/* 下面这个方法之要使用set方法就会被调用 */}
      <div>ParentNum:{getNumMemo}</div>
      <h1 className={styles.title}>Page index</h1>
      <Button onClick={() => setCount(count + 1)}>count+1</Button>
      <Input value={value} onChange={(e) => setValue(e.target.value)}></Input>
      <Child count={count}></Child>
    </div>
  );
}
